<template>
  <el-dialog :model-value="show" title="分配角色" @close="$emit('hide')">
    <el-select v-model="list" multiple placeholder="Select">
      <el-option
        v-for="item in roles"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button type="primary" @click="submit">确认</el-button>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, watch } from "vue";
import {
  getRoleListApi,
  updateUserRolesApi,
  getRolesByUserIdApi,
} from "./api/index";

const emit = defineEmits(["hide"]);

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
});
const list = ref<number[]>([]);
const roles = ref<{ value: number; label: string }[]>([]);
getRoleListApi().then((res) => {
  if (res.code === 200) {
    roles.value = res.data.map((item) => ({
      label: item.name,
      value: item.id,
    }));
    // console.log("2244");
  }
});
watch(
  () => props.id,
  () => {
    if (props.id === 0) return;
    getRolesByUserIdApi(props.id).then((res) => {
      if (res.code === 200) {
        list.value = res.data.map((item) => item.id);
      }
    });
  }
);
const submit = () => {
  ElMessageBox.confirm("确定要修改当前用户的角色吗？", "修改用户角色", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      updateUserRolesApi(props.id, list.value).then((res) => {
        if (res.code === 200) {
          emit("hide");
          ElMessage.success("修改成功");
        }
      });
    })
    .catch(() => {});
};
</script>
<style lang="less" scoped></style>
